<template>
  <div class="app-page">
		<div class="app-main" v-if="isHome">
		  <header class="header">
		  	<div class="cxj-logo"><img src="../../assets/image/newInvitation/cxj_logo.png" /></div>
		  	<div class="top-banner"><img src="../../assets/image/newInvitation/topbanner.png" /></div>
		  	<div class="quanImg"><img src="../../assets/image/newInvitation/quan_list.png" /></div>
		  </header>
		  <!-- /header -->
		  <main class="main">
	      <div class="formWrap">
	        <h2><i class="icon icon-giftbag"></i> 领礼包啦！</h2>
	        <form action="#" onsubmit="return false">
	          <div class="input-block">
	            <i class="icon icon-tel"></i>
	            <input ca="1705_bd_index_phone_click$手机号输入框点击量" class="input-txt" type="tel" v-model="mobile" name="tel" id="mobile" maxlength="11" placeholder="请输入手机号" />
	          </div>
	          <div class="input-block">
	            <i class="icon icon-lock"></i>
	            <input class="input-txt" type="text" v-model="captcha" name="msgCocde" id="msgCode" maxlength="6" placeholder="请输入验证码" />
	            <span class="getMsgCode" @click="getAuthCode" ca="1705_bd_index_phone_click1705_bd_index_getcode_click$获取验证码按钮点击量">
                <timer-btn :second="60" :btntext="btntext" ref="timerBtn"></timer-btn>
              </span>
	          </div>
	          <a href="javascript:;" class="btn btn-submit" :class="{'gray':isgray}" ca="1705_bd_index_coupon_click$立即领取按钮点击量"  v-text="text" @click="getQuan"></a>
	        </form>
	      </div>
	      <a href="javascript:;" @click="scrollY" class="active-info" ca="1705_bd_index_rules_click$活动规则按钮点击量">活动规则<i class="icon icon-arrow"></i></a>
	      <div class="info-content" id="activeCont">
	        <h3>活动规则</h3>
	        <ul>
	          <li>活动时间：即日起至2017年12月31日；</li>
	          <li>领取规则：车享家新用户可领取，新用户是指以手机号申请注册成为车享家用户，且以该手机号申请注册的用户在本次活动开始前，在车享家无消费记录的用户；</li>
	          <li>同一活动，每位新用户限领一次，以手机号码为准；</li>
						<li>以上分别为15.1元五座洗车抵用券、64元打蜡抵用券、100元保养抵用券，app下单即可享受以上优惠；</li>
						<li>个别城市洗车价格有差异，以当地城市价格为准，抵扣15.1元；</li>
	          <li>参与本活动视同用户同意成为车享会员，同意<a href="javascript:;" @click="showMemProtol" class="redCor">《会员注册协议》</a>；</li>
	          <li>若成功领券，<a :href="downloadUrl" class="redCor">下载车享家APP</a>在线预约下单享受对应优惠，可在车享家app－我的－优惠券中查看券信息；</li>
	          <li>请在券有效期内到店完成服务，券过期则作废；</li>
	          <li>对于利用虚假信息领取优惠券的行为，车享家有冻结相应券码进行查实并保留追责权利；</li>
	          <li>如有任何疑问，欢迎垂询车享家客服热线4008-020-666；</li>
	          <li>车享家拥有在法律允许范围内的解释权。</li>
	        </ul>
	      </div>
		  </main>
		</div>

		<!-- 领过券弹窗 -->
			<div class="dialog" v-show="isShowGeted">
		    <div class="shadow"></div>
		    <div class="contrainer center">
		      <div class="section01">
	          <i class="close" @click="showGeted">+</i>
			      <div class="circleBg">
		          <i class="icon icon-quan vmid"></i>
			      </div>
			      <p class="tip">你已领取过<br/>不要太贪心喔~</p>
		      </div>
		      <div class="section02">
			      <div class="appLoad">
		           <img src="../../assets/image/newInvitation/cxjApp_logo.png" />
			      </div>
			      <p class="tip">享更多优惠好礼</p>
			      <a :href="downloadUrl" class="toApp" ca="1705_bd_window_click$app下载页点击量">下载车享家APP</a>
			    </div>
		    </div>
			</div>
			<!-- 老用户弹窗 -->
			<div class="dialog" v-show="isShowOldFriend">
		    <div class="shadow"></div>
		    <div class="contrainer center">
		      <div class="section01">
	          <i class="close" @click="showOldFriend">+</i>
			      <div class="circleBg">
		          <i class="icon icon-ws vmid"></i>
			      </div>
			      <p class="tip">HI,老朋友<br/>新人礼券已经不适合你啦</p>
		      </div>
		      <div class="section02">
			      <div class="appLoad">
		           <img src="../../assets/image/newInvitation/cxjApp_logo.png" />
			      </div>
			      <p class="tip">享更多优惠好礼</p>
			      <a :href="downloadUrl" class="toApp" ca="1705_bd_window_click$app下载页点击量">下载车享家APP</a>
			    </div>
		    </div>
			</div>

    <!-- 会员协议弹窗 -->
	  <div class="dialog" v-show="isShowMemProtol">
	    <div class="shadow"></div>
	    <div class="wrap">
	      <i class="close" @click="showMemProtol">+</i>
	      <h2>会员协议</h2>
	      <div class="conTxt">
				    <p class="b">第一条 服务条款的确认和接纳 </p>
						<p>欢迎使用上海车享家汽车科技服务有限公司（以下简称“车享家”）提供的基于移动互联网、互联网的相关服务（以下简称“服务”）。 </p>
						<p>用户在注册或登录过程中点击“同意”按钮并完成注册程序后，即表示用户完全接受本协议项下的全部条款，本协议即构成对车享家与用户双方之间具有法律约束力的正式文件。 </p>
						<p>用户在使用车享家提供的网络服务前有义务仔细阅读本协议。用户在此不可撤销地承诺，若其使用车享家提供的网络服务，将视为用户同意并接受本协议全部条款的约束，此后用户无权以未阅读本协议或对本协议有任何误解为由，主张本协议无效或要求撤销本协议。 </p>
						<p>本用户服务协议（“本协议”）由您（“用户”）与车享家订立的同时，您也与上海赛可电子商务有限公司（“上海赛可”）同步订立生效。用户既可享受车享家提供的APP（“车享家”）及 微信服务号（“上汽车享家”）上的相关服务，也可享受上海赛可提供的www.chexiang.com（“车享网”）网络相关服务。  </p>
						<p class="b">第二条     服务简介 </p>
						<p>车享家为用户提供网络交易平台服务，用户可在平台上查询商品和服务信息、达成交易意向并进行交易、对购买的商品和使用的服务进行评价、参与车享家举办的竞赛或促销活动以及使用车享家提供的其他网络服务。为改善用户体验及根据经营之需要，车享家有权独立对上述网络服务的项目和内容进行不时调整。 </p>
						<p>用户使用车享家提供的网络服务应遵循本协议及车享家于车享家平台上现已发布或将来可能发布的特定业务服务条款、声明、说明、通知公告、操作规范等规则（以下合称“网站规则”），用户对此完全理解并予以同意。对部分网络服务所适用的特定业务服务条款，若其与本协议之规定有任何冲突，则以特定业务服务条款为准。 </p>
						<p class="b">第三条     条款更新 </p>
						<p>根据国家法律法规变化及车享家的运营需求，车享家有权随时修改本协议的任何条款，并不定期更新网站规则。一旦车享家修改了本协议的任何条款或网站规则（以下简称“条款更新”），车享家会在车享家上公示相应的最新版本（包括其生效日期）。用户有义务不时关注并阅读本协议及网站规则的最新版本。如果用户不接受前述条款更新，用户可立即停止使用车享家的网络服务。如果用户在前述条款更新生效后继续使用车享家的网络服务，则视为用户接受该等条款更新。</p>
						<p class="b">第四条     隐私权保护 </p>
						<p>依法保护用户的隐私权是车享家的基本政策，适用于用户并公示于车享家平台的《隐私权政策》将构成本协议不可分割的一部分。车享家将使用商业上合理的技术与措施保护用户的注册资料及保存于车享家各项服务中的用户信息，但车享家不对该等信息的安全作出任何形式的、明示或默示的担保。同时，在如下情况中车享家将有权向特定主体披露上述信息： </p>
						<p>（a）已获取用户的同意； </p>
						<p>（b）向车享家授权的第三方服务提供者或车享家的第三方合作伙伴披露；</p>
						<p>（c）因用户参与竞赛、促销活动应遵循车享家所提供的网络服务的程序； </p>
						<p>（d）依照法律法规或国家有关司法、政府机关之要求； </p>
						<p>（e）在紧急情况下为维护车享家及车享家之关联方的利益； </p>
						<p>（f）其他车享家在诚信的基础上认为必要的情况。 </p>
						<p class="b">第五条     注册和账号使用 </p>
						<p>用户注册时必须提供真实、准确、完整的注册信息，注册后如有变动应及时更新。用户注册成功后将获得车享家所提供的一个账号，用户将可以设置相应的密码。该账号和密码由用户自行保管，用户应对其账号进行的操作及所有活动承担全部责任。 </p>
						<p>车享家的任何账号均为车享家的财产，用户完成注册后，仅取得相关账号的使用权，用户仅可为个人及非商业的目的使用该账号，不得将账号转让、出租、赠与给任何第三方或由任何第三方继承。 </p>
						<p>用户理解，其为使用车享家的网络服务而使用的任何设备（如电脑、手机等）以及支付的任何费用（如税费、上网费、手机费）等，均由用户自行承担。 </p>
						<p class="b">第六条     知识产权与上载信息 </p>
						<p>车享家提供的网络服务中包含的全部信息（包括但不限于任何文本、图片、音频、视频、数据、标识、数据编辑、商标等）以及为提供服务而使用的任何软件等均受知识产权和其他相关法律保护。用户仅可以为个人和非商业目的使用车享家的网络服务。未经车享家的事先书面同意，用户不得以任何方式复制、转发或以其他方式使用车享家提供的网络服务中所包含的任何信息。 </p>
						<p>部分网络服务会允许用户上载信息（包括但不限于任何文本、图片、音频及视频等，以下简称“上载信息”）至车享家。对该等上载信息，用户同意车享家享有不可撤销的、永久性的、免费的、完全的许可使用和再许可使用的权利，包括但不限于复制、修改、编辑、出版、翻译、传播、表演、展示以及创作衍生内容等。（比如，车享家有权将用户发表于车享家平台的内容授权给签订正式合作协议的合作伙伴转载，并注明用户昵称和来源于车享家。）用户保证对其上载的信息拥有合法的知识产权或授权，并有权使得车享家获取上述许可使用和再许可使用的权利，即使用户已经删除某项上载信息，车享家仍然有权继续使用该项上载信息。 </p>
						<p>用户上载的信息不得带有诽谤性，也不得违反任何法律法规或侵犯任何第三方的合法权利。除非车享家另行承诺或法律法规另有要求，车享家没有义务监控用户的上载信息，不对任何用户上载信息的删除或储存失败负责，也不对用户因上载信息引起的任何名誉或财产损失负责。用户同意并确认，车享家有权依其自主判断对任何违反本协议或网站规则的上载信息实施删除，且车享家对该等删除所引起的任何后果或导致用户的任何损失不负担任何责任。 </p>
						<p>因用户上载信息的违法或侵害第三人的合法权益而导致车享家或其关联公司对第三方承担任何性质的赔偿、补偿或被罚款而遭受损失（直接的、间接的、偶然的、惩罚性的和继发性的损失，包括但不限于车享家或其关联公司支出的律师费、公证费、差旅费等费用），用户应对车享家或其关联公司蒙受的上述损失承担全面的赔偿责任。</p>
						<p>本协议未以明示或默示方式授权用户使用车享家及其关联公司的任何商标、服务标识、域名及其他知识产权。 </p>
						<p class="b">第七条     侵权防范 </p>
						<p>车享家尊重用户的知识产权及其他合法权利。如果用户认为车享家的任何内容或作品侵犯用户的著作权、商标权或其他合法权利的，用户应及时向车享家或车享家发出书面权利通知并提供相关证据（包括用户的身份证明和用户对争议内容有合法权利或授权的证明等）。车享家及车享家在收到上述法律文件后，将会尽快依法采取相应措施。 </p>
						<p>如应司法机关、政府部门的要求或车享家发现用户涉嫌侵犯他人知识产权或其他合法权益时，车享家有权向司法机关、政府部门或权利人披露用户的全部登记信息及对车享家的使用情况。 </p>
						<p class="b">第八条     第三方内容及广告 </p>
						<p>车享家提供的第三方内容或通往第三方网站的链接，均由第三方自行发布。用户应对上述第三方内容或者链接自行加以判断，并承担因使用而引起的所有风险。车享家不对该等第三方的内容或者链接做出任何形式的明示或默示的声明或担保且不承担任何责任。</p>
						<p>用户同意车享家有权在提供网络服务的过程中以各种方式播放广告，且车享家有权以邮件、短信、电话等形式向用户提供商业信息。</p>
						<p class="b">第九条     商品信息 </p>
						<p>用户明确知悉并同意，车享家上的商品信息随时有可能发生变动，车享家对此不作特别通知。车享家将尽合理的商业努力，使网站内展示的商品参数、说明、价格、库存等商品信息尽可能准确、详尽、完整，但受限于互联网技术的发展水平及车享家的业务经营趋势等因素的限制，车享家内的商品信息可能会有一定的滞后性或误差，用户对此情形已充分知悉并完全理解。 </p>
						<p>车享家中展示的商品和服务信息（包括商品和服务的名称、价格、描述等）仅构成要约邀请，用户通过车享家订购商品或服务，订单即为购买商品或服务的要约，车享家及其关联公司有权决定是否对该等要约作出承诺。 </p>
						<p class="b">第十条     收费服务 </p>
						<p>车享家提供收费服务前，将提示用户。只有当用户根据提示，确认同意该项服务相关的购买和支付条款时，用户才能使用该项收费服务。如用户不同意相关的购买和支付条款，则车享家有权不向用户提供该项收费服务。若用户使用收费服务的，应按照该项服务相关的购买和支付条款履行支付义务。 </p>
						<p class="b">第十一条         合法使用 </p>
						<p>车享家的网络服务是经过特定设计以特定版式和风格向用户提供相关内容。未经车享家同意，用户不应通过其他渠道和门户使用车享家的网络服务。用户使用车享家的网络服务，必须遵守所有与服务有关的中华人民共和国法律、法规、行政规章等，不得通过车享家的网络服务实施或帮助第三方实施如下行为： </p>
						<p>（a）违反法律法规或社会公共利益和公共道德的行为； </p>
						<p>（b）侵犯车享家合法利益的行为，包括但不限于发布未经车享家许可的商业广告或信息公告等经营性牟利行为； </p>
						<p>（c）侵犯任何第三方的知识产权或其他任何合法权益的行为； </p>
						<p>（d）任何可能对车享家网络服务的正常运转产生不利影响的行为；</p>
						<p>（e）上载、发送或以其他方式传播包含病毒或其他危害计算机软、硬件设备正常工作的程序或资料；</p>
						<p>（f）上载、发送或以其他方式传播任何诽谤性的、虚假的、辱骂性的、恐吓性的、淫秽的或其他任何非法的信息资料； </p>
						<p>（g）任何侵犯或可能侵犯车享家和/或其关联公司权利、利益的行为。</p>
						<p>车享家有权对用户使用车享家网络服务的情况进行实时审查和监督。如发现用户涉嫌在使用车享家的网络服务时违反任何上述规定的，车享家有权作出独立判断并采取改正、删除用户上传的内容、暂停或终止用户使用服务的权利等措施。 </p>
						<p class="b">第十二条         结束服务 </p>
						<p>车享家有权随时根据战略规划或市场行情中断一项或多项服务，且车享家无义务对任何个人或第三方负责。若用户反对任何本协议的服务条款或对车享家不时修改的服务条款有异议，或对车享家的服务不满的，用户可通过以下任一方式结束服务： </p>
						<p>（a）不再使用车享家经由车享家提供的任何服务； </p>
						<p>（b）注销车享家的账号； </p>
						<p>（c）通知车享家停止对该用户提供服务。 </p>
						<p>如果车享家基于独立判断认定用户所填写的注册资料不真实、不准确、不完整或用户违反本协议或者违反任何适用的法律法规，车享家有权不经通知而限制用户使用车享家的网络服务或者删除用户使用的账号以及账号里的相关内容和信息，车享家不对用户因此遭受的损失承担任何责任。 </p>
						<p>除针对特定服务适用的特殊条款另有约定外，如用户在车享家注册的账号在任何连续的90日内未实际使用或进行登录操作的，则车享家有权删除该账号并停止为该用户提供相关的网络服务。 </p>
						<p>如因任何原因，车享家限制用户使用网络服务或者删除用户使用的账号以及账号里的相关内容和信息的，车享家仍然有权继续提取或使用该等相关内容和信息。</p>
						<p class="b">第十三条         违约赔偿 </p>
						<p>如因车享家违反有关法律、法规或本协议的条款而给用户造成损失的，车享家应承担赔偿责任，但车享家不承担任何间接、附带、衍生或惩罚性的赔偿责任（包括但不限于利润、商业信誉、资料的损失、其他有形或无形财产的损失），且车享家应承担的全部责任均不超过用户因购买与该等索赔有关的商品或服务而已经实际向车享家支付的全部对价。 </p>
						<p>如因用户违反有关法律、法规、本协议项下的任何条款、网站规则的任何规定或任何对第三方的承诺，而给车享家或其关联公司、任何其他第三方造成损失，用户同意承担由此造成的全部损害赔偿责任。</p>
						<p class="b">第十四条         免责声明 </p>
						<p>车享家及用户同意并特此确认： </p>
						<p>用户使用车享家的任何服务所存在的一切风险及后果由其自身承担，车享家不对网络服务作任何形式的、明示或默示的声明或担保。 </p>
						<p>车享家不保证网络服务的及时、安全、准确及可靠。车享家有权不经通知随时变更、中断或终止部分或全部的网络服务，而无需对用户和/或任何第三人承担任何责任。涉及收费服务的，车享家应当在变更、中断或终止该等服务之前事先通知用户，并根据用户实际使用服务的情况，将多收取的服务费退还给用户。对于因不可抗力、车享家不能控制的原因或车享家正常的设备维修升级而造成的网络服务中断，车享家不承担任何责任，但是车享家会尽可能合理地协助处理善后事宜，并努力使用户免受经济损失。</p>
						<p>对于经由车享家的任何服务而传送的任何内容及信息，车享家不保证其正确性及完整性，车享家不对任何上述内容及信息负责，用户使用任何上述内容及信息的，应自行承担风险，车享家有权自行决定是否删除或保留任何上述内容及信息。</p>
						<p class="b">第十五条         适用法律及争议解决 </p>
						<p>本协议的订立、执行、解释及任何有关本协议的争议解决均应适用中华人民共和国法律。</p>
						<p>与本协议有关的或因本协议而引起的任何争议，双方应尽量通过友好协商解决；如无法协商解决的，任何一方均有权向车享家的住所地有管辖权的人民法院起诉，通过诉讼解决争议。 </p>
						<p class="b">第十六条         其他 </p>
						<p>车享家有权通过网页公告、电子邮件、手机短信或其他方式通知用户相关事项（包括但不限于车享家服务的改变、本协议的修改或网站规则的修改等），用户应确保其联系方式的真实、准确，如发生联系方式的任何变更，用户应当及时进行更新。 </p>
						<p>车享家发出的任何通知及各类网站规则构成本协议不可分割的一部分，并于发送或在车享家公布之日（以较早之日为准）视为已送达用户。如用户在通知及各类网站规则发送并生效后继续使用车享家的网络服务的，视为用户同意该通知或网站规则的内容；如用户因任何原因没有阅读相关通知或网站规则的，车享家不承担由此产生的任何法律后果。</p>
						<p>若本协议的任何条款在任何程度上被认定为无效或不可强制执行，则本协议其余部分不受此影响并应在适用法律允许的最大程度上予以执行。 </p>
						<p>车享家未行使本协议或法律规定的任何权利或救济，不构成对前述权利或救济之放弃。 </p>
	      </div>
	    </div>
		</div>

	  <!-- 领券成功 -->
 <div class="app-main rel" v-if="isSuccess">
		  <div class="w">
		    <div class="success-wrap">
		      <i class="icon icon-sure"></i>
		      <p class="txt">领取成功</p>
		    </div>
		    <!--<p class="success-tips">凭券码到店使用（我们已将券码以短信形式发送至您领取的手机号中），或登录车享家APP预约下单使用。</p>-->
		    <ul class="quanList">
		     <li v-for="item in quanList">
		       <div class="quanList-bg">
		         <i class="icon icon-getFlag getR"></i>
		         <h2><p class="txt" v-html="item.title"></p><span class="newTag">新人专享</span></h2>
		         <p class="infoLi">{{ item.tips }}</p>
		         <p class="infoLi">{{ item.validityTime }}</p>
						 <p class="infoLi">仅限车享家APP内下单使用</p>
		       </div>
		     </li>
		   </ul>
	    </div>
	    <div class="w2">
	      <a :href="downloadUrl" style="margin-bottom:1.5rem" class="btn btn-submit" ca="1705_bd_getcoupon_gostores_click$前往车享家APP下单"><i class="icon icon-shop"></i>前往车享家APP下单</a>
		    <a href="javascript:;" @click="scrollY" class="active-info" ca="1705_bd_index_rules_click$活动规则按钮点击量">活动规则<i class="icon icon-arrow"></i></a>
		    <div class="info-content" id="activeCont">
		      <h3>活动规则</h3>
		      <ul>
	          <li>活动时间：即日起至2017年12月31日；</li>
	          <li>领取规则：车享家新用户可领取，新用户是指以手机号申请注册成为车享家用户，且以该手机号申请注册的用户在本次活动开始前，在车享家无消费记录的用户；</li>
	          <li>同一活动，每位新用户限领一次，以手机号码为准；</li>
						<li>以上分别为15.1元五座洗车抵用券、64元打蜡抵用券、100元保养抵用券，app下单即可享受以上优惠；</li>
						<li>个别城市洗车价格有差异，以当地城市价格为准，抵扣15.1元；</li>
	          <li>参与本活动视同用户同意成为车享会员，同意<a href="javascript:;" @click="showMemProtol" class="redCor">《会员注册协议》</a>；</li>
	          <li>若成功领券，<a :href="downloadUrl" class="redCor">下载车享家APP</a>在线预约下单享受对应优惠，可在车享家app－我的－优惠券中查看券信息；</li>
	          <li>请在券有效期内到店完成服务，券过期则作废；</li>
	          <li>对于利用虚假信息领取优惠券的行为，车享家有冻结相应券码进行查实并保留追责权利；</li>
	          <li>如有任何疑问，欢迎垂询车享家客服热线4008-020-666；</li>
	          <li>车享家拥有在法律允许范围内的解释权。</li>
	        </ul>
		    </div>
		  </div>
		</div>
	</div>
</template>

<script>
import common from "../../assets/js/common.js";
import Url from 'url';
import QueryString from 'querystring';
import {Toast} from 'mint-ui';
import timerBtn from '../common/timeBtn';
export default {
    data() {
        return {
          mobile: '',  //获取验证码的手机号
          captcha: '',  //验证码
          text: '立即领取',
          btntext: '获取验证码',
          downloadUrl:'//cxb.chexiang.com/service/version/getLatestAppVersion/0?channel=cx_cxj_xzy_0525_mdjk',
          isHome:true,
          isShowMemProtol:false,
          isShowGeted:false,
          isShowOldFriend:false,
          isSuccess:false,//成功展示券列表
          isgray: false,//按钮不可点
          quanList:[],
          opentype: common.getCookie('wemall_opentype_c'),
          isApp:this.opentype == 6 ? true : false,
          shopUrl:"//h.jia.chexiang.com/store/wxStorelist.htm",
          initSignUrl:process.env.NODE_ENV == 'sit' ? common.isEnv("//recruit") : common.isEnv("//wx")
        }
    },

    mounted () {
      //打点
      this.$nextTick(function () {
      	common.ANA_AnalyticsScan();
      	wx.getLocation({  
		      success: function (res) {  
		        alert(JSON.stringify(res));  
		      },  
		      cancel: function (res) {  
		        alert('用户拒绝授权获取地理位置');  
		      }  
		    });  
      });
      this.initShareInfo();
    },
    components: {timerBtn},
    methods: {
    	initShareInfo:function(){
            var _this = this;
            _this.shareObj = {
              friend:{
                shareTitle:"没来过车享家？送你179元汽车服务大礼包，千家门店任你挑，快来体验！",
                descContent:"上汽直营，全国近1000家门店，车享家值得你的信赖！",
                imgUrl:"https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/others/bdshare.jpg",
                lineLink: common.isEnv("//h.jia") +"/cx/cxj/cxjweb/newInvitation/newInvitation.shtml?utm_source=share"
              },
              friendQuan:{
                shareTitle:"没来过车享家？送你179元汽车服务大礼包，千家门店任你挑，快来体验！",
                descContent:"",
                imgUrl:"https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/others/bdshare.jpg",
                lineLink:common.isEnv("//h.jia") +"/cx/cxj/cxjweb/newInvitation/newInvitation.shtml?utm_source=share"
              }
            }
            common.initWxShare(_this, _this.initSignUrl, _this.shareObj, 1);
        },
      //显示会员协议开关
      showMemProtol(){
        this.isShowMemProtol = !this.isShowMemProtol;
      },
      //已经领过了
      showGeted(){
        this.isShowGeted = !this.isShowGeted;
      },
      //老用户
      showOldFriend(){
        this.isShowOldFriend = !this.isShowOldFriend;
      },
			scrollY(){
				window.scrollBy(0, document.getElementById("activeCont").offsetTop - document.body.scrollTop + 20 );
			},
      //较验手机号
      checkPhone () {
        var mobileRegx = /^1[3|4|5|7|8][0-9]{9}$/, _mobile = this.mobile;
        if (mobileRegx.test(_mobile)) {
        	return true;
        }else {
        	return false;
        };
      },
      //发送验证码
      getAuthCode () { //获取短信验证码
      	var _this = this;
        var isMobile = _this.checkPhone();
        if (!isMobile) {
        	Toast("请输入正确的手机号！");
        	return;
        }
    		var paramObj =  {
    			'mobile': this.mobile
    		};
	    	//倒计时
	      _this.$http.post(common.isdev() + '/bdActivity/sendSmsCode/0.htm', paramObj).then(function (res) {
	          var someData = res.data;
	          if(someData.result == 1) {
	          	  Toast("验证码发送成功！");
	          } else {
	            _this.$refs.timerBtn.send();
	            Toast("验证码发送失败！");
	          }
	      }, function (res) {
	        Toast("验证码发送失败！");
	      });
      },
      //立取券
      getQuan () {
      	var _this = this;
      	var isMobile = _this.checkPhone();
      	if (!isMobile) {
        	Toast("请输入正确的手机号！");
        	return ;
        }
      	var hrefUrl = window.location.href;
	    	var urlObj = Url.parse(hrefUrl);
	    	var queryObj = QueryString.parse(urlObj.query);
      	var paramObj =  {
	    			'mobile': this.mobile,
	    			'captcha':this.captcha,
	    			'source': queryObj.utm_source//商务合作渠道
	    		};
	  		//领取接口
	  		_this.$http.post(common.isdev() + '/bdActivity/receiveAward/0.htm', paramObj).then(function (res) {
        var someData = res.data;
				document.body.scrollTop = 0;//页面滚动到顶部
        //someData.result = 1002;
	        switch (someData.result){
	        	case 1:
	        	      //领券成功
	        	      _this.isHome = false;//首页
	        	      _this.isSuccess = true;//领券成功
				          _this.isShowGeted = false;//已领过
				          _this.isShowOldFriend = false;//老用户
				          var quanList = someData.obj;
				          /**/
				         	for (var i = 0 ; i < quanList.length; i++) {
				         			var quan = quanList[i];
				         			var activityCode = quan.activityCode;
				         			var validStartDate = quan.validStartDate ? quan.validStartDate : new Date().getTime();
				         			var validEndDate =  quan.validEndDate ? quan.validEndDate : new Date().getTime();
				         			quan.validityTime = "有效期：" + _this.formatDate(new Date(validStartDate))+"-"+_this.formatDate(new Date(validEndDate));
				         			if (activityCode == '60115XCLYQ') {
				         				quan.title = "<b class='num'>" + quan.faceValue + "</b>" + "元洗车抵用券";
				         				quan.tips = "仅限5座（含5座SUV）洗车";
				         			}
				         			if (activityCode == '60164LYQ') {
				         				quan.title = "<b class='num'>" + quan.faceValue + "</b>" + "元打蜡抵用券";
				         				quan.tips = "仅限5座机器打蜡";
				         			}
				         			if (activityCode == '601100JKQ') {
				         				quan.title = "<b class='num'>" + quan.faceValue + "</b>" + "元保养抵用券";
												quan.tips = "仅限半合成及以上小保养服务";
				         			}

				         	}
				         	_this.quanList = quanList;
	        	      break;
	        	case 1001:
	        	      //已领过
	        	      _this.isHome = true;//首页
	        	      _this.isSuccess = false;//领券成功
				          _this.isShowGeted = true;//已领过
				          _this.isShowOldFriend = false;//老用户
	        	      break;
	        	case 1002:
	        	      //老用户
	        	      _this.isHome = true;//首页
	        	      _this.isSuccess = false;//领券成功
				          _this.isShowGeted = false;//已领过
				          _this.isShowOldFriend = true;//老用户
	        	      break;
    	      case 0:
    	      		Toast("系统异常，请稍后再试！");
    	      		break;
    	      case 2:
    	      		Toast("对不起，太抢手，券已抢光！");
    	      		break;
    	      case 3:
    	      		Toast("请输入正确的验证码！");
    	      		break;
	        	default :
	        				//验证码错误
	        	      Toast("请输入正确的验证码！");
	        }
        }, function (res){
        	Toast("系统异常，请稍后再试！");
        });
      },
      formatDate (da) {
		     	var year = da.getFullYear();
			    var month = da.getMonth() + 1;
			    var date = da.getDate();
			    return year+"."+month+"."+date;
			}
    }
}

</script>

<style lang="scss">
@import '../../assets/css/common.scss';
@function rem($px){
  @return $px / 10 * 1rem;
}
body{background-color:#fff;font-size:rem(16);max-width:750px;margin:0 auto;}
input,select{background-color:transparent; border-color:transparent;}
img{max-width:100%;}
.shadow{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);z-index:5;}
.redCor{color:#fc4748;text-decoration:underline}
.vmid{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
.gray{background:#999 !important;pointer-events:none;}

/* 按钮 */
.btn{background:#fc4748;display:block;text-align:center;color:#fff;font-size:rem(18);padding:rem(15) 0;}
.btn:active{background:#eb2b2c}

/* 雪碧图 */
.icon{display:inline-block;background:url(../../assets/image/newInvitation/icon.png) no-repeat;vertical-align:middle;}
.icon-giftbag{width:rem(23);height:rem(24);background-position:0 rem(-86);background-size:rem(220);margin-right:rem(9)}
.icon-tel{width:rem(16.25);height:rem(15.42);background-position:rem(-71.5) rem(-70);background-size:rem(170);}
.icon-lock{width:rem(16.25);height:rem(16.26);background-position:rem(-42) rem(-73);background-size:rem(180);}
.icon-arrow{width:rem(47.92);height:rem(6.5);background-position:rem(-132) rem(-103);background-size:rem(180);position:absolute;bottom:rem(-10);left:50%;margin-left:rem(-25)}
.icon-quan{width:rem(110);height:rem(59.17);background-position:rem(-61) rem(2);background-size:rem(170);}
.icon-ws{width:rem(71.26);height:rem(52.5);background-position:0 rem(-102);background-size:rem(170);}
.icon-help{width:rem(10);height:rem(10);background-position:rem(-99) rem(-70);background-size:rem(160);vertical-align:baseline;margin-right:rem(5)}
.icon-sure{width:rem(43.34);height:rem(43.34);background-position:rem(-91) rem(-109.9);background-size:rem(170);}
.icon-shop{width:rem(14.59);height:rem(12.96);background-position:rem(-130) rem(-68);background-size:rem(160);vertical-align:baseline;margin-right:rem(10);}
.icon-getFlag{width:rem(41.67);height:rem(41.67);background-size:rem(170)}

/* 领券页 */
.app-main .header{padding:0 rem(20) rem(9);border-bottom:rem(9) solid #f4f4f4;}
.app-main .header .cxj-logo{text-align:center;padding:rem(9) rem(93.75)}
.app-main .top-banner{margin-bottom:rem(8)}
.app-main .main{padding:rem(6) rem(30)}
.app-main h2{text-align:center;margin-bottom:rem(4);font-size:rem(18)}

/* 表单 */
.formWrap{margin-bottom:rem(15);}
.input-block{border:2px solid #cbcbcb;border-radius:rem(5) rem(5) 0 0;margin-bottom:rem(13);border-bottom:2px solid #fc4748;padding:0 rem(12);display:flex;align-items:center;}
.input-txt{color:#333;height:rem(42);line-height:rem(42);font-size:rem(15);padding-left:rem(10);width:68%;}
.getMsgCode{white-space:nowrap;}
.getMsgCode button{border:none;background:none;-webkit-appearance:none;color:#fc4748;}
.getMsgCode button:active{border:none;background:none;}
.getMsgCode button.codegray{color:#666}
/* 活动规则 */
.active-info{text-align:center;font-size:rem(18);color:#424242;display:block;position:relative;}
.info-content{padding:rem(20) 0 rem(30)}
.info-content h3{font-size:rem(22);margin-bottom:rem(19)}
.info-content ul{counter-reset:lino}
.info-content li{padding-left:rem(15);position:relative;line-height:1.8;font-size:rem(15)}
.info-content li:before{content:counter(lino)".";counter-increment:lino;position:absolute;left:0;}

/* 弹窗 */
.wrap{position:fixed;top:50%;left:0;z-index:6;background:#fff;width:90%;margin:0 5%;transform:translateY(-50%);border-radius:rem(5);padding:5%;}
.close{font-size:rem(45);position:absolute;top:rem(5);right:rem(10);font-family:"Helvetica,arial";color:#777;transform:rotate(45deg);}
.wrap h3{font-size:rem(19)}
.center{text-align:center;}
.circleBg{width:rem(133.34);height:rem(133.34);margin:0 auto rem(15);background:#eee;border-radius:50%;position:relative;}
.tip{color:#9d9d9d;line-height:1.5;}
.contrainer{position:fixed;top:50%;left:0;z-index:6;width:90%;margin:0 5%;transform:translateY(-50%);}
.section01,.section02{background:#fff;border-radius:rem(5);padding:12% 5%;}
.section02{padding-top:10%;border-top:1px dashed #c9c9c9}
.section02 .tip{margin:rem(5) 0 rem(10);color:#777;font-size:rem(12);}
.appLoad{padding:0 40%;}
.toApp{color:#fc4748;border:1px solid currentColor;padding:0 5px;}
.circleBg{width:rem(133.34);height:rem(133.34);margin:0 auto rem(15);background:#eee;border-radius:50%;position:relative;}
.tip{color:#9d9d9d;line-height:1.5;}
.contrainer{position:fixed;top:50%;left:0;z-index:6;width:90%;margin:0 5%;transform:translateY(-50%);}

/* 领券成功 */
.w{padding:0 5%;}
.w2{padding:3% 10%;}
.app-main.rel{position:relative;padding:3% 0;}
.app-main .active-tips{text-align:right;display:block;color:#9e9e9e}
.success-wrap{margin:0% 0 5%;text-align:center;}
.success-wrap .txt{font-size:rem(23);color:#474747;margin:rem(5) 0 rem(8)}
.success-tips{font-size:rem(11);color:#909090;padding:0 3% 2%;}

/* 券列表 */
.getR{position:absolute;right:rem(-6);top:rem(-10)}
.quanList li{margin-bottom:rem(10.5);background:url(../../assets/image/newInvitation/libg.png) no-repeat;background-size:100% 100%;border-radius:rem(3);position:relative;overflow:hidden;}
.quanList-bg{position:relative;overflow:hidden;padding:0 rem(20) rem(10) rem(25);width:99%;margin-top:rem(2)}
.quanList li h2{position:relative;border-bottom:1px solid #bfbfbf;margin-bottom:rem(5);text-align:left;}
.quanList li h2 .txt{font-size:rem(17);color:#ea5b58;}
.quanList li h2 .txt .num{font-size:rem(40);margin-right:rem(5)}
.quanList li .newTag{position:absolute;right:0;bottom:rem(3);color:#9b9b9b;font-size:rem(14);}
.infoLi{position:relative;padding-left:rem(5);line-height:1.5;color:#8f8f8f;font-size:rem(9.5)}
.infoLi:before{content:".";position:absolute;top:35%;left:0;transform:translateY(-50%);margin-right:rem(3);}

/* 下载App */
.downloadApp{background-color: #f4f4f4;box-shadow: inset 0 rem(50) rem(130) rgba(143,143,143,.31);padding:rem(8) 60% rem(13) rem(25);position:fixed;bottom:0;left:0;z-index:8;}
.downloadApp .down{position:absolute;right:rem(20);top:50%;transform:translateY(-50%);color:#777;font-size:rem(16);padding:rem(3);border:1px solid currentColor;}
.dialog {
	.wrap {
		.conTxt {
			max-height: 30rem;
			overflow-y:auto;
			-webkit-overflow-scrolling:touch;
		}
		h2{text-align:center;font-weight:bold;margin:rem(12) 0 rem(10);font-size:rem(20)}
		p{line-height:1.6;}
		.conTxt{
			.b{font-weight:bold;margin:rem(10) 0}
		}
	}
}
</style>

